<template>
    <div class="wrapper" @click="cateShow = !cateShow">
        <filter-report :visible=true :cateShow="cateShow" :type="3"></filter-report>

        <el-table :data="tableList" height="570" stripe border style="width: 100%;">
            <el-table-column v-if="oneDay" prop="hour" label="客户去向" fixed width="140"></el-table-column>
            <el-table-column v-else prop="day" label="客户去向" fixed width="140"></el-table-column>
            
            <!-- <el-table-column v-if="showList[0]" prop="zeroType" label="0类"></el-table-column>
            <el-table-column v-if="showList[1]" prop="oneType" label="1类"></el-table-column> -->
            <el-table-column v-if="showList[2]" prop="twoType" label="2类"></el-table-column>
            <el-table-column v-if="showList[3]" prop="threeType" label="3类"></el-table-column>
            <el-table-column v-if="showList[4]" prop="fourType" label="4类"></el-table-column>
            <el-table-column v-if="showList[5]" prop="fiveType" label="5类"></el-table-column>
            <el-table-column v-if="showList[6]" prop="sixType" label="6类"></el-table-column>
            <el-table-column v-if="showList[7]" prop="sevenType" label="7类"></el-table-column>
            <el-table-column v-if="showList[8]" prop="eightType" label="8类"></el-table-column>
            <el-table-column prop="ghType" label="公海"></el-table-column>
            <el-table-column prop="total" label="总计"></el-table-column>
        </el-table>

    </div>
</template>

<script>
    import Vue from 'vue'
    import {mapGetters} from 'vuex';
    import FilterReport from '~components/filterReport.vue'
    import { getTime,getDate,getYesterday,getSevenDaysBefore } from '~/utils/auth'
    import { Radio, RadioGroup, RadioButton, Table, TableColumn ,Message} from 'element-ui'
    Vue.use(Radio);
    Vue.use(RadioGroup);
    Vue.use(RadioButton);
    Vue.use(Table);
    Vue.use(TableColumn);

    export default {
        components: {
            FilterReport
        },
        head(){
            return {
                title: "客户去向统计",
                meta: [
                    { hid: 'destination', name: 'destination', content: 'destination'}
                ]
            }
        },
        data () {
            return {
                tabName: '客户去向统计',
                cateShow:false,
                tableList:[],
                category:[],
                oneDay:false,
                showList:[true,true,true,true,true,true,true,true,true],
                filter : {
                    startDate:"",
                    endDate:"",
                    customerlevel: '',//客户类型
                    deptId: '',
                    usId:''
                }
            }
        },
        computed: {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            })
        },
        watch:{
            // category(){
            //     if(this.category.length ==0){
            //         this.showList = [true,true,true,true,true,true,true,true,true]
            //     }else{
            //         for(let i = 0; i<=8;i++){
            //            this.showList[i] = (this.category.indexOf(i+"类") !== -1)? true : false;
            //         }
            //     }
                
            // }
        },
        methods: {
            getFilterData(data){
                //this.filter.startDate = data.dateRange[0]?getDate(data.dateRange[0]):getSevenDaysBefore();
                //this.filter.endDate =  data.dateRange[1]?getDate(data.dateRange[1]):getYesterday(new Date());
                this.filter.startDate = data.dateRange[0]?getDate(data.dateRange[0]):getDate(new Date());
                this.filter.endDate =  data.dateRange[1]?getDate(data.dateRange[1]):getDate(new Date());
                this.oneDay = (this.filter.startDate === this.filter.endDate)?true:false;
                this.filter.customerlevel = data.customerlevel || '337,338,339,340,341,342,343,344,345';
                this.filter.deptId = data.deptId;
                this.filter.usId = data.usId;
                this.category = data.category;
                this.getDestinationList(this.filter);
            },
            getDestinationList(filter) {
                this.tableList = [];
                this.$store.dispatch('getDestinationList',filter)
                    .then((response) => {
                        let result = response.data;
                        if (result && result.data) {
                            let resultList = result.data;

                            let deptAll = {
                                    day:"总计",
                                    hour:"总计",
                                    twoType: 0,
                                    threeType: 0,
                                    fourType: 0,
                                    fiveType: 0,
                                    sixType: 0,
                                    sevenType: 0,
                                    eightType: 0,
                                    ghType: 0,
                                    total: null
                                }

                                for(let i = 0; i<resultList.length; i++){
                                    deptAll.twoType += resultList[i].twoType;
                                    deptAll.threeType += resultList[i].threeType;
                                    deptAll.fourType += resultList[i].fourType;
                                    deptAll.fiveType += resultList[i].fiveType;
                                    deptAll.sixType += resultList[i].sixType;
                                    deptAll.sevenType += resultList[i].sevenType;
                                    deptAll.eightType += resultList[i].eightType;
                                    deptAll.ghType += resultList[i].ghType;
                                    //deptAll.total += resultList[i].total;
                                }

                            if(this.oneDay){//一天
                                // let resultList = result.data;
                                // this.tableList = resultList;
                            }else{//多天
                                let resultList = result.data;
                                let startYear= resultList[0].day.substring(0,4);

                                for(let i = 0; i<resultList.length; i++){
                                    let nowYear = resultList[i].day.substring(0,4)
                                    if(i > 0 && startYear == nowYear){
                                        resultList[i].day = resultList[i].day.substring(5,10);
                                    }else{
                                        startYear = resultList[i].day.substring(0,4)
                                    }
                                }
                            }
                            resultList.push(deptAll)

                            this.tableList = resultList;
                            
                        }
                });
            }
        },
        created () {
            //pageTab
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
        }
    }

</script>

<style scoped lang="scss">
    .wrapper{
        min-height: 500px;
      }
    .button-group {
        position: relative;
        margin: 30px 0;
    }
</style>